<template>
  <div class="login">
    <el-container class="container">
      <el-header class="header">
        <div class="nav">
          <img src="../assets/mouse.png" alt="" />
          <h2 class="contact">MOUSE</h2>
        </div>
        <h4 class="title">
          Specialized data sets of alleles and corresponding phenotypes in genetically modified mice
        </h4>
      </el-header>
      <el-main>
        <div class="box">
          <div class="menu">
            <h3 class="welcome">Welcome to login</h3>
            <img src="../assets/line.png" alt="" />
          </div>
          <el-form ref="dom" :rules="rules" :model="form" label-width="120px">
            <div class="column">
              <img src="../assets/LoginIcon.png" alt="" />
              <img class="lin2" src="../assets/line2.png" alt="" />
              <el-form-item prop="name">
                <el-input class="username" v-model="form.name" placeholder="Please enter the account number" />
              </el-form-item>
            </div>
            <div class="lock">
              <img src="../assets/lock.png" alt="" />
              <img class="lin2" src="../assets/line2.png" alt="" />
              <el-form-item prop="password">
                <el-input
                  class="password"
                  show-password
                  v-model="form.password"
                  type="password"
                  placeholder="Please enter the password"
                />
              </el-form-item>
            </div>
          </el-form>
          <div>
            <el-button class="button" type="primary" @click="onSubmit">login</el-button>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { reactive } from 'vue'
import router from '../router'
import { login } from '../api'
import { ElMessage } from 'element-plus'
const dom = ref(null)

const rules = {
  name: [{ required: true, message: 'Please input your username', trigger: 'blur' }],
  password: [{ required: true, message: 'Please input your password', trigger: 'blur' }]
}

const form = reactive({
  name: '',
  password: ''
})

const onSubmit = () => {
  console.log('提交数据', form)
  dom.value.validate((valid) => {
    console.log('校验结果', valid)
    if (!valid) return
    const params = {}
    params.username = form.name
    params.password = form.password
    // 校验成功之后，调用接口，获取返回的数据
    login(params)
      .then((res) => {
        console.log(res)
        // 登录成功 把需要的数据 存在store里面 想怎么用就怎么用
        if (res.code === 200) {
          if (res.data.isadmin) {
            // 是管理员
            ElMessage.success('管理员登录成功！')
            router.push('/AdminIndex')
          } else {
            ElMessage.success('用户登录成功！')
            router.push('/')
          }
        } else {
          ElMessage.error(res.msg || '登录信息错误！')
          // alert(res.msg || '登录信息错误！')
        }
      })
      .catch((err) => {
        console.log(err)
      })
  })
}
</script>

<style scoped>
.container {
  background: url('../assets/login.png') no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}

.contact {
  font-weight: 400px;
  margin-right: 20px;
  text-shadow: 0px 5px 9px rgba(0, 0, 0, 0.3);
  color: #fbfcfd;
}

.header {
  height: 90px;
  width: 100%;
  background-color: #476586;
  display: flex;
  margin-bottom: 30px;
}

.nav {
  font-size: 20px;
  display: flex;
  align-items: center;
}
.nav img {
  margin-right: 20px;
}
.menu img {
  margin-left: 180px;
  width: 100px;
  height: 3px;
}

.title {
  color: #fbfcfd;
  text-shadow: 0px 5px 9px rgba(0, 0, 0, 0.3);
  margin-top: 55px;
}

.box {
  margin-left: 35%;
  position: relative;
}

.menu {
  width: 460px;
  height: 460px;
  background-color: #fff;
  padding-top: 70px;
  position: absolute;
}

.welcome {
  text-align: center;
}

.column {
  width: 345px;
  height: 36px;
  border-bottom: 2px solid #dcdcdc;
  position: absolute;
  margin-left: 60px;
  margin-top: 200px;
}

.lock {
  width: 345px;
  height: 36px;
  border-bottom: 2px solid #dcdcdc;
  position: absolute;
  margin-left: 60px;
  margin-top: 260px;
}

.button {
  width: 300px;
  position: absolute;
  padding-left: 30px;
  padding-right: 30px;
  margin-left: 80px;
  margin-top: 350px;
}

.column img,
.lock img {
  margin-left: 5px;
  margin-right: 5px;
}

.lin2 {
  width: 2px;
  height: 25px;
}

.username,
.password {
  width: 290px;
  margin-left: -70px;
  margin-top: -30px;
  position: absolute;
}
</style>
